<script lang="ts" setup>
import type { memberContractResponse, memberCouponResponse, memberGrowthResponse, memberPointsResponse } from '@fl/api/anjutong/model/member-model'
import type { TabsPaneContext } from 'element-plus'

import { memberContractList, memberCouponList, memberGrowthList, memberPointsList } from '@fl/api/anjutong/member'
import { ElCard, ElTabPane, ElTabs } from 'element-plus'
import { nextTick, watch } from 'vue'

import menberAssets from './member-public/member-assets.vue'
import menberTable from './member-public/member-table.vue'
import userInformation from './member-public/user-information.vue'

const tableTotal = ref<number>(0)
// const pageCurrent = ref<any>(1)
// const pageSize = ref<any>(10)

type tableData = { /// /定义数组ts
    contractAmount?: number | string
    contractName?: string
    contractStatus?: string
    couponName?: string
    couponType?: string
    operationDateTime?: string
    parValue?: number | string
    pointsValue?: number | string
    reason?: string
    remark?: string
    signingCode?: string
    signingDateTime?: string
    useStatus?: string
    valueAfterOperation?: number | string
    valueBeforeOperation?: number | string

}
type tableColumnsOne = { /// /定义数组ts
    id: string
    name: string
}
type tableColumnsTwo = { /// /定义数组ts
    id: string
    name: string
}
type tableColumnsThree = { /// /定义数组ts
    id: string
    name: string
}
type tableColumnsFours = { /// /定义数组ts
    id: string
    name: string
}
type MyObject = {
    gradeValue: string
    growthValue: number
    sunValue: number
}
type SchemaTypes = {
    key: string
    label: string
}
type SchemaTypesData = {
    address: string
    age: string
    call: string
    consignee: string
    id: string
    identification: string
    name: string
    sex: string
    source: string
    timeTemp: string
    wechat: string

}
const memberAssets: MyObject = { // 定义对象ts
    gradeValue: '白金',
    growthValue: 400,
    sunValue: 4000,
}
const SchemaType = reactive<SchemaTypes[]>(
    [{ key: 'name', label: '会员姓名' }, { key: 'call', label: '会员手机' }, { key: 'id', label: '用户ID' }, { key: 'name', label: '昵称' }, { key: 'age', label: '会员年龄' }, { key: 'wechat', label: '微信号' }, { key: 'sex', label: '会员性别' }, { key: 'consignee', label: '常用收货人' }, { key: 'address', label: '详细地址' }, { key: 'identification', label: '身份证号' }, { key: 'timeTemp', label: '注册时间' }, { key: 'timeTemp', label: '最近登陆时间' }, { key: '', label: '' }, { key: 'source', label: '来源方式' }],
)
const schemaData = reactive<SchemaTypesData[]>([{
    address: '浙江省杭州市西湖区工专路',
    age: '23',
    call: '18990900900',
    consignee: '曲婷婷',
    id: '20210908789900',
    identification: '422301198411332223',
    name: '曲婷婷',
    sex: '女',
    source: 'APP',
    timeTemp: '2019-09-09 10:40',
    wechat: 'xiaowangzi1995',
}])

const tableColumnOne = reactive<tableColumnsOne[]>([
    {
        id: 'operationDateTime',
        name: '操作时间',
    },
    {
        id: 'valueBeforeOperation',
        name: '操作前数值',
    },
    {
        id: 'pointsValue',
        name: '积分数值',
    },
    {
        id: 'valueAfterOperation',
        name: '操作后积分',
    },
    {
        id: 'reason',
        name: '积分原因',
    },
    {
        id: 'remark',
        name: '备注',
    },
])
const tableColumnTwo = reactive<tableColumnsTwo[]>([
    {
        id: 'operationDateTime',
        name: '操作时间',
    },
    {
        id: 'valueBeforeOperation',
        name: '操作前成长值',
    },
    {
        id: 'pointsValue',
        name: '成长值数值',
    },
    {
        id: 'valueAfterOperation',
        name: '操作后成长值',
    },
    {
        id: 'reason',
        name: '成长值原因',
    },
    {
        id: 'remark',
        name: '备注',
    },
])
const tableColumnThree = reactive<tableColumnsThree[]>([
    {
        id: 'operationDateTime',
        name: '操作时间',
    },
    {
        id: 'couponName',
        name: '优惠券名称',
    },
    {
        id: 'parValue',
        name: '面值（元）',
    },
    {
        id: 'couponType',
        name: '优惠类型',
    },
    {
        id: 'useStatus',
        name: '使用状态',
    },
    {
        id: 'remark',
        name: '操作备注',
    },
])
const tableColumnsFour = reactive<tableColumnsFours[]>([
    {
        id: 'signingDateTime',
        name: '签订时间',
    },
    {
        id: 'contractName',
        name: '合同名称',
    },
    {
        id: 'contractAmount',
        name: '合同金额（元）',
    },
    {
        id: 'signingCode',
        name: '签约编码',
    },
    {
        id: 'contractStatus',
        name: '合同状态',
    },
    {
        id: 'remark',
        name: '备注',
    },
])
let tableDatasOne = reactive<tableData[]>([])
let tableDatasTwo = reactive<tableData[]>([
    // {
    //     operationDateTime: '2016-05-03',
    //     pointsValue: '+20',
    //     reason: '购买商品',
    //     remark: '无',
    //     valueAfterOperation: 2200,
    //     valueBeforeOperation: 2000,
    // },
    // {
    //     operationDateTime: '2016-05-03',
    //     pointsValue: '+20',
    //     reason: '购买商品',
    //     remark: '无',
    //     valueAfterOperation: 2200,
    //     valueBeforeOperation: 2000,
    // },
    // {
    //     operationDateTime: '2016-05-03',
    //     pointsValue: '+20',
    //     reason: '购买商品',
    //     remark: '无',
    //     valueAfterOperation: 2200,
    //     valueBeforeOperation: 2000,
    // },
    // {
    //     operationDateTime: '2016-05-03',
    //     pointsValue: '+20',
    //     reason: '购买商品',
    //     remark: '无',
    //     valueAfterOperation: 2200,
    //     valueBeforeOperation: 2000,
    // },
    // {
    //     operationDateTime: '2016-05-03',
    //     pointsValue: '+20',
    //     reason: '购买商品',
    //     remark: '无',
    //     valueAfterOperation: 2200,
    //     valueBeforeOperation: 2000,
    // },
    // {
    //     operationDateTime: '2016-05-03',
    //     pointsValue: '+20',
    //     reason: '购买商品',
    //     remark: '无',
    //     valueAfterOperation: 2200,
    //     valueBeforeOperation: 2000,
    // },
    // {
    //     operationDateTime: '2016-05-03',
    //     pointsValue: '+20',
    //     reason: '购买商品',
    //     remark: '无',
    //     valueAfterOperation: 2200,
    //     valueBeforeOperation: 2000,
    // },
])
let tableDatasThree = reactive<tableData[]>([
    // {
    //     couponName: '新人专享优惠',
    //     couponType: '好房代金券',
    //     operationDateTime: '2016-05-03',
    //     parValue: '+20',
    //     remark: '无',
    //     useStatus: '购买商品',
    // },
    // {
    //     couponName: '新人专享优惠',
    //     couponType: '好房代金券',
    //     operationDateTime: '2016-05-03',
    //     parValue: '+20',
    //     remark: '无',
    //     useStatus: '购买商品',
    // },
    // {
    //     couponName: '新人专享优惠',
    //     couponType: '好房代金券',
    //     operationDateTime: '2016-05-03',
    //     parValue: '+20',
    //     remark: '无',
    //     useStatus: '购买商品',
    // },
    // {
    //     couponName: '新人专享优惠',
    //     couponType: '好房代金券',
    //     operationDateTime: '2016-05-03',
    //     parValue: '+20',
    //     remark: '无',
    //     useStatus: '购买商品',
    // },
    // {
    //     couponName: '新人专享优惠',
    //     couponType: '好房代金券',
    //     operationDateTime: '2016-05-03',
    //     parValue: '+20',
    //     remark: '无',
    //     useStatus: '购买商品',
    // },
    // {
    //     couponName: '新人专享优惠',
    //     couponType: '好房代金券',
    //     operationDateTime: '2016-05-03',
    //     parValue: '+20',
    //     remark: '无',
    //     useStatus: '购买商品',
    // },
    // {
    //     couponName: '新人专享优惠',
    //     couponType: '好房代金券',
    //     operationDateTime: '2016-05-03',
    //     parValue: '+20',
    //     remark: '无',
    //     useStatus: '购买商品',
    // },
])
let tableDatasFour = reactive<tableData[]>([
    // {
    //     contractAmount: '10',
    //     contractName: '租房合同',
    //     contractStatus: '已签订',
    //     remark: '无',
    //     signingCode: '34534534',
    //     signingDateTime: '2016-05-03',
    // },
    // {
    //     contractAmount: '10',
    //     contractName: '租房合同',
    //     contractStatus: '已签订',
    //     remark: '无',
    //     signingCode: '34534534',
    //     signingDateTime: '2016-05-03',
    // },
    // {
    //     contractAmount: '10',
    //     contractName: '租房合同',
    //     contractStatus: '已签订',
    //     remark: '无',
    //     signingCode: '34534534',
    //     signingDateTime: '2016-05-03',
    // },
    // {
    //     contractAmount: '10',
    //     contractName: '租房合同',
    //     contractStatus: '已签订',
    //     remark: '无',
    //     signingCode: '34534534',
    //     signingDateTime: '2016-05-03',
    // },
    // {
    //     contractAmount: '10',
    //     contractName: '租房合同',
    //     contractStatus: '已签订',
    //     remark: '无',
    //     signingCode: '34534534',
    //     signingDateTime: '2016-05-03',
    // },
    // {
    //     contractAmount: '10',
    //     contractName: '租房合同',
    //     contractStatus: '已签订',
    //     remark: '无',
    //     signingCode: '34534534',
    //     signingDateTime: '2016-05-03',
    // },
    // {
    //     contractAmount: '10',
    //     contractName: '租房合同',
    //     contractStatus: '已签订',
    //     remark: '无',
    //     signingCode: '34534534',
    //     signingDateTime: '2016-05-03',
    // },
])
const activeName = ref('first')
const activeNameTemp = ref('second')
watch(activeNameTemp, (newValue, oldValue) => {
    console.log(`table表格总数tableTotal ${oldValue} to ${newValue}`)
})

function handleClick(tab: TabsPaneContext, event: Event) {
    console.log(tab, event, 'tab, event')
    console.log(activeName.value, 'activeName.value')
    nextTick(() => {
        activeNameTemp.value = activeName.value
        console.log(activeNameTemp.value, 'sssssssssssssdasdsa')
        if (activeNameTemp.value === 'first')
            console.log(`output->`, name)

        else if (activeNameTemp.value === 'second')
            getPointsInformation()

        else if (activeNameTemp.value === 'third')
            getGrowthInformation()
        else if (activeNameTemp.value === 'fourth')
            getCouponInformation()
        else
            getContractInformation()
    })
}

function getPointsInformation(data?: any) {
    memberPointsList({
        memberId: 1001,
        page: data.page ? data.page : 1,
        size: data.size ? data.size : 10,
    }).then((res: memberPointsResponse) => {
        const { records, total } = res
        tableDatasOne = [...records]
        tableTotal.value = total!
        console.log(res, '积分记录')
    })
}

function getGrowthInformation(data?: any) {
    memberGrowthList({
        memberId: 1001,
        page: data.page ? data.page : 1,
        size: data.size ? data.size : 10,
    }).then((res: memberGrowthResponse) => {
        const { records, total } = res
        tableDatasTwo = [...records]
        tableTotal.value = total!
        console.log(res, tableTotal.value, '成长值记录')
    })
}

function getCouponInformation(data?: any) {
    memberCouponList({
        memberId: 1001,
        page: data.page ? data.page : 1,
        size: data.size ? data.size : 10,
    }).then((res: memberCouponResponse) => {
        const { records, total } = res
        tableDatasThree = [...records]
        tableTotal.value = total!
        console.log(res, tableTotal.value, '优惠券')
    })
}

function getContractInformation(data?: any) {
    memberContractList({
        memberId: 1001,
        page: data.page ? data.page : 1,
        size: data.size ? data.size : 10,
    }).then((res: memberContractResponse) => {
        const { records, total } = res
        tableDatasFour = [...records]
        tableTotal.value = total!
        console.log(res, '合同')
    })
}
function pageChange(data?: any) {
    console.log(data, 'sendPagefun')
    getPointsInformation(data)
    getGrowthInformation(data)
    getCouponInformation(data)
    getContractInformation(data)
}
</script>

<template>
    <user-information :schema="SchemaType"
                      :schema-data="schemaData"
    />

    <!-- <menber-tag :member-tag="memberTag" /> -->

    <menber-assets :member-assets="memberAssets" />

    <ElCard>
        <ElTabs v-model="activeName"
                class="demo-tabs"
                ml-20
                @tab-click="handleClick"
        >
            <ElTabPane label="订单记录"
                       name="first"
            >
                <menber-table :table-data="tableDatasOne"
                              :table-column="tableColumnOne"
                />
            </ElTabPane>

            <ElTabPane label="积分记录"
                       name="second"
            >
                <menber-table :table-data="tableDatasOne"
                              :table-column="tableColumnOne"
                              :table-total="tableTotal"
                              @page-change="pageChange"
                />
            </ElTabPane>

            <ElTabPane label="成长值记录"
                       name="third"
            >
                <menber-table :table-data="tableDatasTwo"
                              :table-column="tableColumnTwo"
                              :table-total="tableTotal"
                              @page-change="pageChange"
                />
            </ElTabPane>

            <ElTabPane label="优惠券"
                       name="fourth"
            >
                <menber-table :table-data="tableDatasThree"
                              :table-column="tableColumnThree"
                              :table-type-three="true"
                              :table-total="tableTotal"
                              @page-change="pageChange"
                />
            </ElTabPane>

            <ElTabPane label="合同"
                       name="five"
            >
                <menber-table :table-data="tableDatasFour"
                              :table-column="tableColumnsFour"
                              :table-type-four="true"
                              :active-name="activeNameTemp"
                              :table-total="tableTotal"
                              @page-change="pageChange"
                />
            </ElTabPane>
        </ElTabs>
    </ElCard>
</template>
